<template>
  <view class="g-swiper">
    <swiper class="swiper" indicator-dots="false" autoplay="true" interval="5000" duration="1500" @change="change">
      <swiper-item v-for="(item ,index) in abc" :key="index">
        <view class="swiper-item"> {{item.content}}</view>
      </swiper-item>
    </swiper>
    <swiper-dot class="dot" :current="current" :list="abc"></swiper-dot>
  </view>
</template>

<script lang="ts">
  import Vue from "vue";
  import swiperDot from "@/components/swiperDot.vue";
  export default Vue.extend({
    components: { swiperDot },
    props: {
      abc: {
        // 要显示的数组
        type: Array,
        default() {
          return [];
        }
      }
    },
    data() {
      return {
        current: 0
      };
    },
    onLoad() { },
    methods: {
      change(e) {
        this.current = e.detail.current;
      },
      /**
       * 点击segmentedControl 事件回调
       */
      onClickItem(index) {
        if (this.currentTab !== index) {
          this.currentTab = index;
        }
      }
    }
  });
</script>

<style lang="scss">
  .g-swiper {
    overflow: hidden;
    height: 284upx;
    color: #fff;
    position: relative;
  }

  uni-swiper .uni-swiper-dot-active {
    background: #fff;
  }

  .swiper .uni-swiper-dot-active {
    background: #fff !important;
  }
</style>